<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="components-container">
        <el-form ref="pram" label-width="150px" :model="pram">
          <el-form-item label="位置：" prop="position"
            :rules="[{ required: true, message: '请选择', trigger: ['blur', 'change'] }]">
            <el-select v-model="pram.position" placeholder="请选择">
              <el-option v-for="item in positions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>

          <el-form-item label="图片：" prop="imgUrl"
            :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
            <div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
              <div v-if="pram.imgUrl" class="pictrue"><img :src="pram.imgUrl"></div>
              <div v-else class="upLoad">
                <i class="el-icon-camera cameraIconfont" />
              </div>
            </div>
          </el-form-item>


          <el-form-item label="类型：" prop="linkType"
            :rules="[{ required: true, message: '请选择类型', trigger: ['blur', 'change'] }]">
            <el-radio-group v-model="pram.linkType" :disabled="isDisabled">
              <el-radio label='0'>不跳转</el-radio>
              <el-radio label='10'>分类跳转</el-radio>
              <el-radio label='20'>商品跳转</el-radio>
              <el-radio label='30'>页面跳转</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="链接参数：" prop="linkUrl">
            <el-cascader v-if="pram.linkType == 10" v-model="pram.linkUrl" :options="merCateList" :props="props" clearable
              class="selWidth mr20" size="small" />
    
            <el-input v-if="pram.linkType == 20" placeholder="请输入商品ID" v-model="pram.linkUrl"
              :disabled="isDisabled"></el-input>
            <el-input v-if="pram.linkType == 30" placeholder="请输入小程序页面地址" v-model="pram.linkUrl"
              :disabled="isDisabled"></el-input>
          </el-form-item>


          <el-form-item label="是否显示">
            <el-switch v-model="pram.isShow" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="handerSubmit('pram')"
              v-hasPermi="['admin:banner:update', 'admin:banner:save']">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/index'
import * as pageManApi from '@/api/pagemanagement.js'
import * as selfUtil from '@/utils/ZBKJIutil.js'
import { fileImageApi } from '@/api/systemSetting'
import { getToken } from '@/utils/auth'
import { Debounce } from '@/utils/validate'
import { categoryApi } from '@/api/store'
export default {
  name: "creatBanner",
  components: { Tinymce },
  data() {
    return {
      merCateList: [],
      props: {
        children: 'child',
        label: 'name',
        value: 'id',
        emitPath: false
      },
      isDisabled: this.$route.params.isDisabled === '1' ? true : false,
      loading: false,
      constants: this.$constants,
      categoryTreeData: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      },

      positions: [{
        value: 1,
        label: 'APP首页'
      }, {
        value: 2,
        label: '商品分类'
      }],

      pram: {
        position: 1,
        isShow: 1,
        id: null,
        imgUrl: null,
        linkType: '0',
        linkUrl: null
        // mediaId: null
      },
      editData: {},
      myHeaders: { 'X-Token': getToken() },
      editorContentLaebl: "",
      // basicForm:{editorContent:""}
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
  },
  mounted() {
    this.getCategorySelect();
    if (this.$route.params.id) {
      this.getInfo()
      this.setTagsViewTitle()
    }
  },
  methods: {
    getCategorySelect() {
      categoryApi({ status: -1, type: 1 }).then(res => {
        this.merCateList = res
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    getInfo() {
      pageManApi.InfoBanner({ "id": this.$route.params.id }).then(data => {
        this.editData = data
        this.hadlerInitEditData()
      })
    },
    hadlerInitEditData() {
      if (!this.$route.params.id) return
      const { position,
        isShow, imgUrl, linkType, linkUrl, id } = this.editData
      this.pram.position = position
      this.pram.isShow = isShow
      this.pram.imgUrl = imgUrl
      this.pram.linkType = linkType
      if (linkType == 10 || linkType == 20) {
        this.pram.linkUrl = parseInt(linkUrl)
      } else {
        this.pram.linkUrl = linkUrl
      }
      this.pram.id = id
      // this.pram.mediaId = mediaId
    },
    handerSubmit: Debounce(function (form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        if (!this.$route.params.id) {
          this.handlerSave()
        } else {
          this.handlerUpdate()
        }
      })
    }),
    handlerUpdate() {
      this.loading = true
      pageManApi.UpdateBanner(this.pram).then(data => {
        this.$message.success('编辑轮播图成功')
        this.loading = false
        this.$router.push({ path: '/design/index' });
      }).catch(() => {
        this.loading = false
      })
    },
    handlerSave() {
      this.loading = true
      pageManApi.AddBanner(this.pram).then(data => {
        this.$message.success('新增轮播图成功')
        this.loading = false
        this.$router.push({ path: '/design/index' });
      }).catch(() => {
        this.loading = false
      })
    },
    setTagsViewTitle() {
      const title = '编辑文章'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.$route.params.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    // 图片上传
    modalPicTap(tit, num, i, status) {
      const _this = this;
      if (_this.isDisabled) return;
      this.$modalUpload(function (img) {
        if (tit === '1' && !num) {
          _this.pram.imgUrl = img[0].sattDir

        }
      }, tit, 'content')
    }
  }
}
</script>

<style scoped></style>
